<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>商品列表</span>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属店铺">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name">
      </el-table-column>
      <el-table-column label="所属分类" prop="category">
      </el-table-column>
      <el-table-column label="价格" prop="price">
      </el-table-column>

      <el-table-column label="商品图片" prop="imgUrl">
       <template slot-scope="scope">
        <el-avatar shape="square" :size="50" :src="scope.row.imgUrl"></el-avatar>
       </template>
      </el-table-column>

      <el-table-column label="描述" prop="goodsDesc">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 分页 -->
    <el-pagination class="page" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="currentPage" :page-sizes="[3, 6]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </el-card>

</template>

<script>
import { getGoodsReq ,delGoodsReq} from '@/api/user';

export default {
  data() {

    return {
      img:'http://sell.h5.itsource.cn:8087/imgs/1676305658757.jpg',
      ids: [],
      pageSize: 3,
      total: 0,
      currentPage: 1,
      tableData: [],
      multipleSelection: []
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
   async handleDelete(index, row) {
      let { id } = row
      let res=await delGoodsReq({id})
      console.log(res.data);
      let {code,data}=res.data
      if(code===0){
        this.getgoodslist()
      }
      // console.log( id);
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getgoodslist()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getgoodslist()
    },
    // 获取商品列表
   async getgoodslist(){
      let currentPage=this.currentPage
      let pageSize=this.pageSize
      let res=await getGoodsReq({
        currentPage,
        pageSize
      })
      let {total,data}=res.data
      this.tableData=data
      this.total=total
      console.log(this.tableData);
      


    }
  },
  created(){
    this.getgoodslist()
  }

}
</script>

<style lang="scss" scoped>
.page {
  margin-top: 20px;
}

</style>